第三天啦! 你還在呢!!

• 你的毅力讓人佩服，今天我們要來玩玩非同步的模式，將非同步的過程加入觀察，看看迸出什麼火花!
  

• 延續著昨天的教學，我們在subscribe的前後印出before及after，並觀察看看印出什麼資訊。

• 範例1

import { Observable } from 'rxjs';

// 被觀察的目標(Observable)
const obs$ = new Observable((subscriber) => {
  subscriber.next('1');
  subscriber.next('2');
  subscriber.next('3');
  subscriber.complete(); // 結束!
});

// 觀察者(Observer)
const observer = {
  next: (data) => console.log(`checked ${data}, next!`),
  error: (err) => console.log(`error is occured: ${err}}`),
  complete: () => console.log(`complete`),
};

// 訂閱
console.log('=== before ==='); //<-- before
obs$.subscribe(observer); // 開始一連串的進行資料的傳遞，就像`data streaming`一樣
console.log('=== after ===');  //<-- after

// 訂閱後印出資訊如下
// === before ===
// checked 1, next!
// checked 2, next!
// checked 3, next!
// === after ===

解析

• 程式模擬圖如下:

• 根據印出的資訊，符合我們的預期，也就是整個Observable依循blocking的方式來進行，所以才會先有before，後有after。

加入非同步Async來觀察看看

• 延續上面的例子，我們透過setInterval來設計async程式。
• 需求如下:

1. 設定 變數count
2. 每 1秒鐘 ，count+1，並呼叫next送出
3. 5秒過後，結束訂閱

• Async範例

// 被觀察的目標(Observable)
const asyncObs$ = new Observable((subscriber) => {
  // 第一步:加入async程式
  let count = 0;
  const id = setInterval(() => {
    count += 1;
    subscriber.next(count); // next() 送出資料
  }, 1000);

  // 第二步: 回傳一個function來代表 "結束訂閱"(參考補充說明1)
  return () => {
    console.log('結束訂閱!!');
    clearInterval(id);
  };
});

...
// 訂閱
console.log('=== before ===');
const mySubscript$ = asyncObs$.subscribe(observer); // 開始訂閱
setTimeout(() => mySubscript$.unsubscribe(), 5000); // 五秒後結束訂閱
console.log('=== after ===');

// 訂閱後印出資訊如下
// === before ===
// === after ===
// checked 1, next!
// checked 2, next!
// checked 3, next!
// checked 4, next!
// checked 5, next!
// 結束訂閱!!

解析

• 程式模擬圖如下:

• 來解析一下:

• 第一步: 加入async程式，每1秒鐘用next發出訊息
• 第二步: 取消訂閱後要呼叫的程式。(這裡稱之為TeardownLogic，有興趣可以看一下補充說明1)
• 第三步: 訂閱，並取得 mySubscript$
• 第四步: 設定5秒鐘之後，將mySubscript$取消訂閱

• 你可以看到，程式符合non-blocking非阻塞式(補充說明2)，先印出before及after之後，再處理非同步的部分，依序印出1,2,3,4,5。
• 5秒過後，退訂，呼叫退訂的函示，印出結束訂閱。

✍Recap

• 今天我們學會了如何在Observable裡實作非同步(async)，並透過退訂來結束程序。
• 連續三天上工，真的不錯喔~ 準備明天學習更多囉!

補充說明

1. 看一下源碼，Observable與TearDownLogic的關係如下，這裡看不懂也沒關係，可以先有個概念即可。✍

2. 想了解了解blocking/ non-blocking的差異，可以複習一下Huli大這篇